/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useEffect, useState } from 'react';
import { Form, Input, Modal } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import AnalyseCategorySelect from 'src/pages/AnalyseManage/Components/AnalyseCategorySelect';
import { dataSetGetFiles } from 'src/services/DataManage';
import TreeNode from './TreeNode';
import styles from '../index.module.scss';
import { CheckCircleOutlined } from '@ant-design/icons';
import { copyDeloittePage } from 'src/services/AnalyseManage';

interface CopyProp {
	modalVisible: boolean;
	pageId: string;
	onSuccess: () => void;

	onCancel(): void;
}

const { confirm } = Modal;

const NewReportModal = ( props: CopyProp ) => {
	// 分析
	const [ formAnalysis ] = Form.useForm();
	const { modalVisible, onSuccess, onCancel } = props;
	const [ formAnalysisData, setFormAnalysisData ] = useState( null );
	// 数据集
	const [ formDataSet ] = Form.useForm();
	const [ formDataSetData, setFormDataSetData ] = useState( null );
	const [ dataVisible, setDataVisible ] = useState( false );
	const [ currentFolder, setCurrentFolder ] = useState( null );
	const [ dataTree, setDataTree ] = useState( [] );

	const handleNext = async () => {
		formAnalysis.validateFields()
			.then( async ( values: any ) => {
				setFormAnalysisData( values );
				setDataVisible( true );
			} )
			.catch( errorInfo => { // error
			} );
	};

	const handelAnalysisCancel = () => {
		onCancel();
	};

	const selectAnalysisFolder = ( node: any ) => {
		formAnalysis.setFieldsValue( { categoryId: node.id } );
	};

	const okHandle = async () => {
		formDataSet.validateFields()
			.then( async ( values: any ) => {
				const data = {
					'categoryId': formAnalysisData.categoryId,
					'code': formAnalysisData.code,
					'dataSetCategoryId': values.dataSetCategoryId,
					'dataSetName': values.dataSetName,
					'fromPageId': props.pageId,
					'name': formAnalysisData.name
				};
				console.log( data );
				const res = await copyDeloittePage( data );
				if ( res.data && res.data.success ) {
					setDataVisible( false );
					onCancel();
					confirm( {
						title: '添加成功',
						icon: <CheckCircleOutlined />,
						content: '是否立即替换数据',
						okText: '是',
						cancelText: '稍后替换',
						onOk() {
							props.onSuccess();
						},
						onCancel() {
							console.log( 'Cancel' );
						},
					} );
				}
			} )
			.catch( errorInfo => { // error
			} );
	};

	useEffect( () => {
		if ( dataVisible ) {
			getModelFiles();
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [ dataVisible ] );

	//获取所有文件树
	const getModelFiles = async () => {
		const info = await dataSetGetFiles( { data: '' } );
		if ( info.data.success ) {
			setDataTree( info.data.data.map( item => { return { key: item.id, title: item.tableName, ...item }; } ) );
			clickNode( { key: info.data.data[0].id } );
		}
	};

	//点击node
	const clickNode = item => {
		setCurrentFolder( item.key );
		formDataSet.setFieldsValue( { dataSetCategoryId: item.key } );
		setFormDataSetData( { ...formDataSetData, dataSetCategoryId: item.key } );
	};

	return (
		<Modal
			destroyOnClose
			title={'添加至我的分析'}
			visible={modalVisible}
			onCancel={handelAnalysisCancel}
			onOk={handleNext}
			width={'60%'}
			okText='下一步'
			cancelText='取消'
		>
			<Form
				preserve={false}
				layout="horizontal" form={formAnalysis}
				initialValues={formAnalysisData}>
				<FormItem
					labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'报表编码'} name="code"
					rules={[ { required: true, message: '不能为空！' } ]}>
					<Input placeholder="编码不能为空，且不可重复" />
				</FormItem>
				<FormItem
					labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'报表名称'} name="name"
					rules={[ { required: true, message: '不能为空！' } ]}>
					<Input placeholder="名称不能为空" />
				</FormItem>
				<FormItem
					labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="请选择文件夹" name="categoryId"
					rules={[ { required: true, message: '不能为空！' } ]}>
					<AnalyseCategorySelect
						deloitteFlag={'0'}
						onSelect={( node ) => { selectAnalysisFolder( node ); }}
						defaultSelectedKeys={[]}
					></AnalyseCategorySelect>
				</FormItem>
			</Form>
			{/* 数据集modal */}
			<Modal
				destroyOnClose
				title={'添加至数据集'}
				visible={dataVisible}
				onCancel={() => setDataVisible( false )}
				onOk={okHandle}
				width={'60%'}
				okText='确定'
				cancelText='取消'
			>
				<Form
					preserve={false}
					layout="horizontal" form={formDataSet}
					initialValues={formDataSetData}>
					<FormItem
						labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'数据集名称'} name="dataSetName"
						rules={[ { required: true, message: '不能为空！' } ]}>
						<Input placeholder="名称不能为空" />
					</FormItem>
					<FormItem
						labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="请选择数据集文件夹" name="dataSetCategoryId"
						rules={[ { required: true, message: '不能为空！' } ]}>
						<div className={styles.dataTree_container}>
							{
								dataTree.map( ( item, index: number ) => (
									<TreeNode
										activeNodeId={currentFolder}
										key={index} id={item.key}
										label={item.title}
										handleClick={() => clickNode( item )}></TreeNode>
								) )
							}
						</div>
					</FormItem>
				</Form>
			</Modal>
		</Modal>
	);

};

export default React.memo( NewReportModal );
